<template>
	<!-- 20230216 -->
	<view class="mall-spike-list-page">
		<!-- 页面内容 -->
		<view class="page-content padding-bottom-safe-20">

			<view class="jc-header bg-ff">
				<!-- 秒杀时间段 -->
				<scroll-view scroll-x class="height-100 bg-main text-28 text-ff" style="white-space: nowrap;">

					<view class="position-relative width-20p inline-block height-100"
						:class="time_index == index ? 'on' : ''" v-for="(item,index) in spike_time" :key="index"
						@tap="swithTab(index)">
						<!-- 场次 -->
						<view class="flex flex-direction align-center justify-center height-90 bg-main">
							<view class="line-height-40 text-30 text-bold">{{item.start_time}}</view>
							<view class="line-height-30 text-24">{{item.brief}}</view>
						</view>
						<!-- 三角 -->
						<view class="block-center triangle_down" v-if="time_index == index"></view>
					</view>

				</scroll-view>

				<!-- 秒杀场次时间 -->
				<view class="padding-lr-20 padding-tb-10 bg-main">
					<!-- 有秒杀场次 -->
					<view class="bg-ff radius-20" v-if="spike_time.length">
						
						<view class="padding-lr-40 line-height-80 bg-main-light radius-20 flex">

							<view class="text-30 text-main">
								<text v-if="spike_time.length && spike_time[time_index].status == 1">距离本场结束</text>
								<text v-else>距离本场开始</text>
							</view>

							<view class="margin-left-40 text-28 flex align-center">
								<view class="padding-lr-5 line-height-50 radius-6 bg-main text-ff text-bold">
									{{countDown.hour}}
								</view>
								<view class="margin-lr-5">:</view>
								<view class="padding-lr-5 line-height-50 radius-6 bg-main text-ff text-bold">
									{{countDown.minute}}
								</view>
								<view class="margin-lr-5">:</view>
								<view class="padding-lr-5 line-height-50 radius-6 bg-main text-ff text-bold">
									{{countDown.second}}
								</view>
							</view>
						</view>
					</view>

					<!-- 没有秒杀场次 -->
					<view class="line-height-80 text-center text-ff" v-else>
						暂无秒杀活动~
					</view>
				</view>
			</view>

			<!-- 背景色 -->
			<view class="bg_block">
			</view>

			<view class="list_block">
				<!-- 场次产品 -->
				<view class="margin-lr-20">
					<ty-list-list :status="loadStatus">
						<!-- 单个产品 -->
						<view class="margin-tb-20 padding-20 radius-20 flex align-center bg-ff"
							v-for="(item,index) in list" :key="index"
							@click="go('/pages/mall/spike/detail?id='+item.id)">
							<!-- 图片 -->
							<image class="jc-image-240" :src="item.cover_img"></image>

							<view class="margin-left-20 flex-one">
								<!-- 标题 -->
								<view class="line-40 height-80 text-30 text-cut-two">{{item.name}}</view>
								<!-- 销量 -->
								<view class="margin-top-30 text-24 text-77">
									<text v-if="spike_time[time_index].status == 1">已抢{{item.sales_number}}件</text>
									<text v-else>限量{{item.number}}件</text>
								</view>
								<!-- 销量 -->
								<view class="margin-top-40 flex align-end justify-between">

									<view class="flex align-center">
										<view class="line-height-40 text-32 text-main">¥{{item.price_spike}}</view>
										<view class="margin-left-15 line-height-30 text-through text-20 text-main"
											style="opacity:0.5;">
											¥{{item.price_original}}
										</view>
									</view>

									<!-- 未开场且未预约 -->
									<view
										class="width-160 line-height-60 radius-30 bg-main text-center text-24 text-bold text-ff"
										v-if="(spike_time[time_index].status == 2 || spike_time[time_index].status == 3) && item.has_appoint_notice == 0"
										@tap.stop="notice(item.id,index)">
										抢购提醒
									</view>

									<!-- 未开场且已预约 -->
									<view
										class="width-160 line-height-60-border-cc radius-30 text-center text-24 text-bold text-4d"
										v-if="(spike_time[time_index].status == 2 || spike_time[time_index].status == 3) && item.has_appoint_notice == 1"
										@tap.stop="noticeCancel(item.id,index)">
										取消提醒
									</view>

									<view
										class="width-160 line-height-60 radius-30 bg-main text-center text-24 text-bold text-ff"
										style="opacity:0.5;"
										v-else-if="spike_time[time_index].status == 1 && item.sales_number >= item.number"
										@tap.stop="go('/pages/mall/spike/detail?id='+item.id)">
										已抢光
									</view>

									<view
										class="width-160 line-height-60 radius-30 bg-main text-center text-24 text-bold text-ff"
										v-else-if="spike_time[time_index].status == 1 && item.sales_number < item.number"
										@tap.stop="go('/pages/mall/spike/detail?id='+item.id)">
										立即抢购
									</view>
								</view>
							</view>
						</view>
					</ty-list-list>
				</view>
			</view>

		</view>

		<!-- 页面浮层 -->
		<view class="page-layer">
			<!-- 抢购提醒浮层 -->
			<jc-mall-noticeLayer :show.sync="isNoticeLayerShow" :minute="noticeMinute"></jc-mall-noticeLayer>
		</view>
	</view>
</template>

<script>
	import mall from '../api/mall.js'
	export default {
		data() {
			return {
				// 当前选中场次
				time_index: 0,
				// 场次
				spike_time: [],
				//倒计时
				countDown: {
					hour: '00',
					second: '00',
					minute: '00'
				},
				timer: {}, //倒计时
				// 是否显示抢购提醒浮层
				isNoticeLayerShow: false,
				// 秒杀产品前X分钟提醒
				noticeMinute: '',
				// 下拉刷新状态 true--正在下拉 false--没有在下拉
				isPullDownIng: false,
				// 列表状态
				loadStatus: '',
				// 列表
				list: {}
			}
		},

		onReady() {
			this.getSceneData()

			mall.config.getSpikeConfig().then(res => {
				if (res.code == 0) {
					this.noticeMinute = res.data.notice_minute
				}
			})
		},

		onReachBottom() {
			this.loadList(0)
		},

		onUnload() {
			clearInterval(this.timer)
		},

		onPullDownRefresh() {
			this.isPullDownIng = true
			// 加载场次产品列表
			this.loadList(1)
		},

		// #ifdef MP-WEIXIN
		onShareAppMessage() {

		},
		// #endif

		methods: {
			// 获取场次列表
			getSceneData() {
				mall.spike.listScene().then(res => {
					if (res.code == 0) {
						this.spike_time = res.data.spike_time

						if (this.spike_time.length) {
							// 加载场次产品列表
							this.loadList(1)

							// 场次倒计时
							this.timeCountDown()
						}

					}
				})
			},

			// 点击切换秒杀场次
			swithTab(index) {
				this.time_index = index;
				clearInterval(this.timer)

				//场次倒计时
				this.timeCountDown()

				//加载场次产品列表
				this.loadList(1)
			},

			/**
			 * 商品列表
			 * @param {int} isFirstPage 是否第一页 0--不是 1--是
			 * @date 2023-02-16
			 */
			loadList(isFirstPage) {
				mall.spike.listSceneProduct(this, isFirstPage, this.spike_time[this.time_index].s_time, this.spike_time[
					this.time_index].e_time).then(res => {
					if (this.isPullDownIng) {
						this.isPullDownIng = false
						uni.stopPullDownRefresh()
					}
				})
			},

			// 场次倒计时
			timeCountDown() {
				let spaceTime = this.spike_time[this.time_index].space_time

				this.timer = setInterval(res => {
					if (spaceTime > 0) {
						let time = this.cn.timeSplit(spaceTime, 3)
						this.countDown.hour = time.hour
						this.countDown.minute = time.minute
						this.countDown.second = time.second
							--spaceTime
					} else {
						clearInterval(this.timer)

						//重新加载场次
						this.getSceneData()
					}
				}, 1000)
			},

			/**
			 * 设置提醒
			 * @date 2023-02-17
			 */
			notice(id, index) {
				// #ifdef MP-WEIXIN
				uni.requestSubscribeMessage({
					tmplIds: ['j9k-hnY1zJFQKmQ_NermXgt0DC--qPjKnERvf0uAC-o'],
					success: (res) => {
						// console.log(res)
						if (res['j9k-hnY1zJFQKmQ_NermXgt0DC--qPjKnERvf0uAC-o'] == 'accept') {
							mall.spike.insertNotice(id).then(res => {
								if (res.code == 0) {
									this.isNoticeLayerShow = true
									this.list[index].has_appoint_notice = 1
								}
							})
						}
					}
				})
				// #endif

				// #ifndef MP-WEIXIN
				// TODO 判断有没有权限 没有权限跳转权限设置页 有权限去预约		
				mall.spike.insertNotice(id).then(res => {
					if (res.code == 0) {
						this.isNoticeLayerShow = true
						this.list[index].has_appoint_notice = 1
					}
				})
				// #endif
			},

			/**
			 * 取消提醒
			 * @date 2023-02-16
			 */
			noticeCancel(id, index) {
				mall.spike.cancelNotice(id).then(res => {
					if (res.code == 0) {
						this.list[index].has_appoint_notice = 0
					}
				})
			}
		}
	}
</script>

<style scoped>
	/* 秒杀时间段选中样式 */
	.on>view:nth-child(1) {
		background: var(--mainLightOpaque) !important;
		color: var(--main);
	}

	/* 三角 */
	.triangle_down {
		width: 0;
		height: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-top: 10rpx solid #FFF0F0;
	}

	.bg_block {
		position: fixed;
		top: 200rpx;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 290rpx;
		background: linear-gradient(to bottom, var(--main), #f5f5f5);
	}

	/* 秒杀产品列表 */
	.list_block {
		margin-top: 210rpx;
	}


	/* 按钮样式 */
	.line-height-60-border-cc {
		height: 60rpx;
		line-height: 56rpx;
		border: 2rpx solid #ccc;
	}
</style>